<template>
  <van-nav-bar title="榜单排行" left-text="" left-arrow @click-left="goBack" @click-right="showShare = true">
  </van-nav-bar>
  <div class="rank_header">
    <div class="title">
         <h3>商品热销榜</h3>
    </div>
 </div>
 <div class="rank_box">
     <div class="item" v-for="item in list">
         <div class="top">
             <div class="img">
                 <img :src="item.thumbs_text" alt="">
             </div>
             <div class="content">
                 <div class="title">{{item.product.name}}</div>
                 <p class="middle"><span>{{item.product.flag_text}}</span>{{item.product.content}}</p>
                 <p class="desc">“{{item.comment_text}}”</p>
             </div>
         </div>
         <div class="footer">
             <div class="price">
                 ￥<span>{{item.price}}</span>
                 券后价
                 <span>极速退款</span>
             </div>
             <router-link class="btn" :to="{path:'/product/detail', query:{pid: item.proid}}">
                 去购买
             </router-link>
         </div>
         <div class="tip">
             <img src="/assets/images/hot.png" alt="">
             <span>热销指数9.9</span>
         </div>
     </div>
 </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser") ?? {})
const goBack = () => { proxy.$router.go(-1) }

const list=ref([]);

onBeforeMount(()=>{
  getProductInfo()
})
const getProductInfo = async ()=>{
  // 商品信息
  let result=await Api.Ranking()
  if (result.code == 1) {
    list.value=result.data
    console.log(list.value);
  }
}
</script>

<style>
@import url("/assets/css/ranking.css");
.rank_box{
  height: 100%;
}
.top{
  height: 15vh;
}
</style>